<template>
	<view class="loginp">
		<view class="top" src="/static/bg.png">
			<view class="header">
				<view class="header-title">Remove Account</view>
			</view>
			<view class="middle">
				<image class="middle-logo" src="/static/lcycle.png"></image>
				<view class="middle-name">Cash Box</view>
			</view>
			<view class="content">
				<view class="content-view">
					<view class="guoqi">🇵🇭</view>
					<view class="content-view-qh">+63</view>
					<input type="number" maxlength="10" class="content-view-text ml60" placeholder="9XXXXXXXXX"
						v-model="user_tel" />
				</view>
				<view class="content-view mt24">
					<input type="number" :password="isOn" maxlength="6" placeholder="Enter 6-digit password"
						class="content-view-text" v-model="password" />
					<image @tap="showPsd" class="content-view-right"
						:src="isOn ? '/static/show.png':'/static/hidden.png'"></image>
				</view>
			</view>
			<view class="btn" @click="removeuser">
				REMOVE
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_tel: '',
				password: '',
				isOn: true,
			}
		},
		methods: {
			removeuser() {
				if (this.user_tel.length == 0) {
					return uni.showToast({
						title: 'Please Enter phone number',
						icon: 'none'
					})
				}
				if (this.password.length == 0) {
					return uni.showToast({
						title: 'Please Enter 6-digit password',
						icon: 'none'
					})
				}

				uni.showLoading({
					title: 'loading...',
					mask: true
				})
				const _this = this
				uni.request({
					url: 'https://app.cs-box.com/Vc/Signin/logoff_user_data',
					method: 'POST',
					data: {
						user_tel: this.user_tel,
						password: this.password
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					uni.hideLoading()
					const msg = res.data.msg
					uni.showToast({
						icon: 'none',
						title: msg
					})
					_this.user_tel = ''
					_this.password = ''
				}).catch(e => {
					uni.hideLoading()
				})

			},
			showPsd() {
				this.isOn = !this.isOn
			}
		}
	}
</script>

<style scoped lang="scss">
	.guoqi {
		margin-left: 12rpx;
		width: 56rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30px;
		color: #333333;
		line-height: 96rpx;
		height: 96rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.loginp {
		width: 100vw;
		min-height: 100vh;
	}

	.top {
		width: 750rpx;
		height: 740rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.header {
		width: 100vw;
		height: 46rpx;
		display: flex;
		flex-direction: row;

		&-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 18px;
			color: #fff;
			text-align: center;
			font-style: normal;
			text-transform: none;
			flex: 1;
			line-height: 46rpx;
			height: 46rpx;

		}

		&-back {
			width: 46rpx;
			height: 46rpx;
			margin-left: 15rpx;
		}

		&-backImgr {
			width: 46rpx;
			height: 46rpx;
			margin-right: 15rpx;
		}
	}



	.middle {
		margin-top: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&-logo {
			margin-top: 2rpx;
			width: 160rpx;
			height: 160rpx;
		}

		&-name {
			padding-top: 30rpx;
			height: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 24px;
			text-align: center;
			font-style: normal;
		}

	}

	.content {
		margin-top: 0rpx;
		width: 100vw;
		height: 234px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.mt24 {
			margin-top: 34rpx;
		}

		.ml60 {
			margin-left: 60rpx;
		}

		&-view {
			width: calc(100vw - 100rpx);
			margin: 0 50rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1px solid #EEEEEE;
			display: flex;
			flex-direction: row;
			padding: 0rpx 28rpx;

			&-left {
				width: 60rpx;
				height: 40rpx;
				margin-top: 27rpx;
			}

			&-qh {
				margin-left: 12rpx;
				width: 56rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #333333;
				line-height: 96rpx;
				height: 96rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			&-text {
				margin: 25rpx 0rpx;
				height: 46rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #8E8E8E;
				flex: 1;
			}

			&-right {
				width: 40rpx;
				height: 40rpx;
				margin-top: 28rpx;
			}
		}
	}

	.btn {
		margin: 90rpx 50rpx 0rpx;
		height: 96rpx;
		background: #FB2D19;
		border-radius: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.remove {
		margin-top: 40rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #696969;
		text-align: center;
		font-style: normal;
		text-transform: none;
		width: 100vw;
	}
</style>